<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{static/slide/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:text="${systemTitle} ? ${systemTitle} : 'HZERO'"></title>

    <!-- css -->
    <link rel="stylesheet" th:href="@{static/slide/css/login.css}"/>
    <link rel="stylesheet" th:href="@{static/slide/css/bootstrap-3.3.7/css/bootstrap.min.css}"/>

    <!-- js -->
    <script th:src="@{static/slide/js/jquery.min.js}"></script>
    <script th:src="@{static/slide/js/jsencrypt.min.js}"></script>
    <script th:src="@{static/slide/js/jquery.validate.min.js}"></script>
    <script th:src="@{static/slide/js/login.js}"></script>

    <!--/* use for template data */-->
    <template data-captchaGetUrl="/oauth/public/captcha"
              data-linkToFindPwd="/oauth/public/slide/password_find.html?template=slide"
              id="templateData"
              th:attr="data-languagesJson=${languagesJson},data-copyright=${copyright},data-logoSrc=${logoUrl},data-loginButton=${loginButton},data-userNamePlaceholder=${userNamePlaceholder},data-userNameMessage=${userNameMessage},data-passwordPlaceholder=${passwordPlaceholder},data-passwordMessage=${passwordMessage},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-findPassword=${findPassword},data-captchaKeyMsg=${captchaKeyMsg},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-phoneMsg=${phoneMsg},data-phonePlaceholder=${phonePlaceholder},data-captchaLoadingMsg=${captchaLoadingMsg},data-accountType=${accountType},data-mobileType=${mobileType},data-isNeedCaptcha=${isNeedCaptcha},data-usernameNotFound=${usernameNotFound},data-loginErrorMsg=${loginErrorMsg},data-openLoginWays=${openLoginWaysJson},data-phone=${phone},data-publicKey=${publicKey},data-accountEncrypt=${accountEncrypt},data-passwordEncrypt=${passwordEncrypt}">
    </template>
</head>

<body>
<div id="login">
    <div class="login-container login-layout">
        <div class="logo-header-left">
            <a href="">
                <img alt="HZERO" height="32px" th:src="${logoUrl}?${logoUrl}:'/oauth/static/slide/img/logo.png'"/>
            </a>
        </div>
        <div class="lang-type">
            <a class="lang-icon" th:each="language:${languages}" th:title="${language.description}"><img
                    th:alt="${language.description}"
                    th:src="'/oauth/static/slide/img/' + ${language.code} + '.png'"></a>
        </div>
        <div class="login-layout-content">
            <div class="login-tab">
                <div class="slide" style="overflow: hidden;">
                    <ul>
                        <li class="slide-item"><img alt="" th:src="@{/static/slide/img/temp1.svg}" title=""/></li>
                        <li class="slide-item"><img alt="" th:src="@{/static/slide/img/temp2.svg}" title=""/></li>
                        <li class="slide-item"><img alt="" th:src="@{/static/slide/img/temp3.svg}" title=""/></li>
                    </ul>
                    <div class="arrow" style="display:none">
                        <div class="prev">
                            <
                        </div>
                        <div class="next">>
                        </div>
                    </div>
                    <ol class="carousel-indicators">
                        <li data-slide-to="0" style='width:24px;opacity:1'></li>
                        <li data-slide-to="1"></li>
                        <li data-slide-to="2"></li>
                    </ol>
                </div>

                <div class="login-tabs">

                    <div class="login-tabs-tab-nav">
              <span class="login-tabs-tab-nav-icon"
                    th:classappend="${param.type != null ? param.type[0] : 'account'} != 'account' ? 'login-tabs-tab-nav-icon-active' : ''">
                <i class="glyphicon glyphicon-user" th:title="${accountType}"></i>
              </span>
                        <span class="login-tabs-tab-nav-icon"
                              th:classappend="${param.type != null ? param.type[0] : 'account'} == 'account' ? 'login-tabs-tab-nav-icon-active' : ''">
                <i class="glyphicon glyphicon-phone" th:title="${mobileType}"></i>
              </span>
                    </div>
                    <div class="login-tabs-tab-content">
                        <div class="login-tabs-tab-pane  login-tab-pane login-account"
                             th:classappend="${param.type != null ? param.type[0] : 'account'} == 'account' ? 'login-tabs-tab-pane-active' : ''">
                            <div class="logo">
                                <a class="logo-text" href="">
                                    <span th:text="${loginTitle}"></span>
                                </a>
                            </div>
                            <form id="loginFormAccount">
                                <div class="login-form">
                                    <div class="login-form-item login-form-item-with-help">
                      <span class="login-form-item-children">
                        <div class="login-form-explain" th:utext="${loginErrorMsg}"></div>
                      </span>
                                    </div>
                                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-user"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input class="form-control login-form-input" id="username" name="username"
                                     th:placeholder="${userNamePlaceholder}"
                                     th:value="${param.username != null ? param.username[0] : ''}"
                                     type="text">
                            </div>
                          </div>
                        </span>
                      </span>
                                    </div>
                                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-lock"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input class="form-control login-form-input" id="password" name="password"
                                     th:placeholder="${passwordPlaceholder}"
                                     type="password">
                              <span class="glyphicon glyphicon-eye-close look"></span>
                            </div>
                          </div>
                        </span>
                      </span>
                                    </div>
                                    <div class="login-form-item" th:if="${isNeedCaptcha}">
                      <span class="login-form-item-children">
                        <div class="login-row">
                          <div class="login-col-12">
                            <span class="login-form-item-children-prefix">
                              <div class="login-input-content">
                                <span class="login-form-input-prefix">
                                  <i class="glyphicon glyphicon-pencil"></i>
                                </span>
                                <div class="form-group login-form-item-children-input">
                                  <input class="form-control login-form-input" id="captcha" name="captcha"
                                         th:placeholder="${captchaPlaceholder}"
                                         type="text">
                                </div>
                              </div>
                            </span>
                          </div>
                          <div class="login-col-12">
                            <a class="login-account-captcha">
                              <img alt="Captcha" class="login-account-captcha-image" src="/oauth/public/captcha"/>
                            </a>
                          </div>
                        </div>
                      </span>
                                    </div>
                                    <div class="login-account-find-password login-form-item">
                      <span class="login-form-item-children">
                        <a href="/oauth/public/slide/password_find.html" target="_self" th:text="${findPassword}">
                        </a>
                      </span>
                                    </div>
                                </div>
                                <div class="login-form-item">
                    <span class="login-form-item-children">
                      <button class="btn btn-primary btn-raised login-account-login-btn" th:text="${loginButton}"
                              type="submit"></button>
                    </span>
                                </div>
                            </form>
                            <div class="login-form-item">
                  <span class="login-form-item-children">
                    <div class="login-open-app">
                      <span th:each="openLoginWay:${openLoginWays}" th:title="${openLoginWay.appName}">
                        <form method="POST"
                              target="_self"
                              th:action="'/oauth/open/'+${openLoginWay.appCode}+'?channel='+${openLoginWay.channel}">
                          <button class="login-open-app-icon-btn-wrap" type="submit">
                            <img class="login-open-app-icon" height="40" th:alt="${openLoginWay.appName}"
                                 th:src="${openLoginWay.appImage}"
                                 th:title="${openLoginWay.appName}" type="image"
                                 width="40"/>
                          </button>
                        </form>
                      </span>
                    </div>
                  </span>
                            </div>
                        </div>
                        <div class="login-tabs-tab-pane  login-tab-pane login-phone"
                             th:classappend="${param.type != null ? param.type[0] : 'account'} != 'account' ? 'login-tabs-tab-pane-active' : ''">
                            <div class="logo">
                                <a class="logo-text" href="">
                                    <span th:text="${loginTitle}"></span>
                                </a>
                            </div>
                            <form id="loginFormPhone">
                                <div class="login-form">
                                    <div class="login-form-item login-form-item-with-help">
                      <span class="login-form-item-children">
                        <div class="login-form-explain" th:utext="${loginErrorMsg}"></div>
                      </span>
                                    </div>
                                    <div class="login-form-item">
                      <span class="login-form-item-children">
                        <span class="login-form-item-children-prefix">
                          <div class="login-input-content">
                            <span class="login-form-input-prefix">
                              <i class="glyphicon glyphicon-earphone"></i>
                            </span>
                            <div class="form-group login-form-item-children-input">
                              <input class="form-control login-form-input" id="phone" name="phone"
                                     th:placeholder="${phonePlaceholder}"
                                     th:value="${param.username != null ? param.username[0] : ''}" type="text">
                            </div>
                          </div>
                        </span>
                      </span>
                                    </div>
                                    <div class="login-form-item">
                                        <div class="login-form-item-control">
                        <span class="login-form-item-children">
                          <div class="login-row">
                            <div class="login-col-12">
                              <span class="login-form-item-children-prefix">
                                <div class="login-input-content">
                                  <span class="login-form-input-prefix">
                                    <i class="glyphicon glyphicon-pencil"></i>
                                  </span>
                                  <div class="form-group login-form-item-children-input">
                                    <input class="form-control login-form-input" id="phoneCaptcha" name="phoneCaptcha"
                                           th:placeholder="${captchaLoadingMsg}" type="text">
                                  </div>
                                </div>
                              </span>
                            </div>
                            <div class="login-col-12">
                              <button class="btn btn-flat btn-raised login-form-button-captcha"
                                      th:text="${captchaLoadingMsg}"></button>
                            </div>
                          </div>
                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="login-form-item">
                    <span class="login-form-item-children">
                      <button class="btn btn-primary btn-raised login-phone-login-btn" th:text="${loginButton}"
                              type="submit"></button>
                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
        </div>
    </div>
</div>
<div style="display: none">
    <!--/* because thymeleaf don't let use access request */-->
    <input id="login-hidden-loginButton" th:value="${loginButton}" type="text">
    <input id="login-hidden-defaultUserName" th:value="${param.username != null ? param.username[0] : ''}"
           type="password">
    <input id="login-hidden-loginType" th:value="${param.type != null ? param.type[0] : ''}" type="password">
</div>

<div class="login-notification"></div>

</body>

</html>